<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist-vue2基础班</title>
    <style>
        .span-type {
            padding: 5px;
        }

        .span-type-active {
            color: #fff;
            background-color: #ac1111;
        }
    </style>
</head>

<body>
    <main id="app">
        <h2>学生增加</h2>
        <div class="form">
            <div class="form-item">
                <label class="form-item__label" for="name">学生姓名</label>
                <div class="form-item__content">
                    <input class="input" type="text" maxlength="10" id="name" v-model="formData.name">
                </div>
            </div>
            <div class="form-item">
                <label class="form-item__label">性别</label>
                <div class="form-item__content">
                    男<input class="input" type="radio" name="sex" value="男" v-model="formData.sex">
                    女<input class="input" type="radio" name="sex" value="女" v-model="formData.sex">
                </div>
            </div>
            <div class="form-item">
                <label class="form-item__label" for="tel">电话号码</label>
                <div class="form-item__content">
                    <input class="input" type="text" maxlength="11" id="tel" v-model="formData.tel">
                </div>
            </div>
            <div class="form-item">
                <label class="form-item__label">专业</label>
                <div class="form-item__content">
                    <select v-model="formData.major">
                        <option value=""></option>
                        <option value="JAVA">JAVA</option>
                        <option value="WEB">WEB</option>
                    </select>
                </div>
            </div>
            <div class="form-item">
                <button id="submit" class="button button--primary" style="margin-left: 120px;"
                    @click="handleSubmit">确认</button>
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>编码</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>专业</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in computedList" :key="item.id">
                    <td><input type="checkbox" :value="item.id" v-model="selectIds"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.major}}</td>
                    <td>{{item.tel}}</td>
                    <td>
                        <span @click="handleDeleteRow(item.id)" class="iconfont icon-del">删除</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="tfoot">
            <span class="span-type">{{leftCount}}未选</span>
            <span @click="handleType(1)" :class="getClass(1)">全部</span>
            <span @click="handleType(2)" :class="getClass(2)">未选中</span>
            <span @click="handleType(3)" :class="getClass(3)">选中</span>
            <span @click="handleDelete" class="span-type">删除选中</span>
        </div>
    </main>
</body>
<script src="../../../js/vue2.js"></script>
<script>
    let id = 100;

    const vue = new Vue({
        data() {
            return {
                formData: {
                },
                type: 1,
                selectIds: [],
                listData: [
                    {
                        id: 0,
                        name: "Hydra",
                        sex: "男",
                        tel: "13547811112",
                        major: "JAVA"
                    },
                    {
                        id: 1,
                        name: "王珂",
                        sex: "男",
                        tel: "13547811113",
                        major: "WEB"
                    },
                    {
                        id: 2,
                        name: "聂仔欣",
                        sex: "男",
                        tel: "13547811114",
                        major: "JAVA"
                    }
                ]
            }
        },
        methods: {
            handleSubmit() {
                // 最好，拷贝一份formData，添加到列表中
                const newRow = { ...this.formData, id: id++ };
                this.listData.push(newRow);
                console.log("newRow = ", newRow);
                this.formData = {};
            },
            handleDelete() {
                // 从this.listData中删除在this.selectIds中的所有数据
                // 把未选中的数据拿出来，然后复制给listData
                const result = this.listData.filter(v1 => this.selectIds.findIndex(v2 => v2 == v1.id) == -1);
                this.selectIds = [];
                this.listData = result;

            }, 
            handleDeleteRow(id) {
                const index = this.listData.findIndex(v => v.id == id);
                this.listData.splice(index,1);
            },
            handleType(type) {
                this.type = type;
            },
            getClass(type) {
                return {
                    // 当对象的属性值为true的时候，表示有该属性名的class值
                    'span-type-active': this.type == type,
                    'span-type': true
                }
                // if (this.type == type) {
                //     return ['span-type-active','span-type']
                // } else {
                //     return ['span-type']
                // }
                // if (this.type == type) {
                //     return 'span-type-active span-type'
                // } else {
                //     return 'span-type'
                // }
            }
        },
        computed: {
            computedList() {
                switch (this.type) {
                    // 选中
                    case 3 : {
                        // 在listData里面，找到id在selectIds中的数据

                        // filter：如果函数返回true，会在返回的数组里面
                        // findIndex：查询第一次函数返回true的索引，如果没有返回true的情况，结果为-1
                        // return this.listData.filter(function(v1) {
                        //     let index = this.selectIds.findIndex(v2 => v2 == v1.id);
                        //     return index != -1;
                        // })

                        return this.listData.filter(v1 => this.selectIds.findIndex(v2 => v2 == v1.id) != -1);
                        // console.log("selectIds = ",this.selectIds);
                    }
                    // 未选中
                    case 2 : {
                        return this.listData.filter(v1 => this.selectIds.findIndex(v2 => v2 == v1.id) == -1)
                    }
                    default: return this.listData;
                } 
            },
            leftCount() {
                return this.listData.length - this.selectIds.length;
            }
        }
    })

    vue.$mount("#app");
</script>

</html>